<template>
  <a-modal
    v-model:open="open"
    title="用药记录"
    :maskClosable="false"
    :bodyStyle="{ maxHeight: modelMaxHeight, overflow: 'hidden auto' }"
    :width="800"
  >
    <div
      class="health-box"
      v-for="(item, index) in state.orderData"
      :key="index"
      style="margin-bottom: 30px"
    >
      <div
        style="
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 10px;
        "
      >
        <span style="color: #4e5969"
          >开具医生：<span style="color: #1d2129">{{ item.openDoctorName }}</span></span
        >
        <span style="color: #4e5969"
          >开具日期：<span style="color: #1d2129">{{ item.orderOpenTime }}</span></span
        >
      </div>
      <a-table
        :columns="state.testColums"
        :dataSource="item.orderDetailList"
        :pagination="false"
        size="small"
      >
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex == 'splotnum'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex == 'dosage'">
            {{ record.dosage ? parseFloat(record.dosage).toFixed(2) : '' }}
          </template>
          <template v-if="column.dataIndex == 'amount'">
            {{ record.amount ? parseFloat(record.amount).toFixed(1) : '' }}
          </template>
        </template>
      </a-table>
    </div>
    <template #footer>
      <a-button key="back" @click="open = false">关闭</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
const activeKey = ref('1')
const open = ref(false)

const modelMaxHeight = ref(window.innerHeight * 0.8 - 150 + 'px')

const state = reactive({
  testColums: [
    {
      key: 'splotnum',
      dataIndex: 'splotnum',
      align: 'left',
      title: '序号'
    },
    {
      key: 'orderItemName',
      dataIndex: 'orderItemName',
      align: 'left',
      title: '药品名称'
    },
    {
      key: 'methodName',
      dataIndex: 'methodName',
      align: 'left',
      title: '给药方式'
    },
    {
      key: 'dosage',
      dataIndex: 'dosage',
      align: 'left',
      title: '次剂量'
    },
    {
      key: 'dosageUnit',
      dataIndex: 'dosageUnit',
      align: 'left',
      title: '次剂量单位'
    },
    {
      key: 'frequencyName',
      dataIndex: 'frequencyName',
      align: 'left',
      title: '用药频率'
    },
    {
      key: 'spec',
      dataIndex: 'spec',
      align: 'left',
      title: '药品规格'
    },
    {
      key: 'amount',
      dataIndex: 'amount',
      align: 'left',
      title: '用药数量'
    }
  ],
  orderData: []
})

const init = (orderList) => {
  open.value = true
  state.orderData = orderList
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.reportName {
  font-size: 16px;
  font-weight: 600;
}

.check-title {
  font-weight: 600;
  margin: 10px 0;
}

.exam-report-box {
  background: #f7f8fa;
  padding: 10px;
}
</style>
